<template>
  <div id="BillingMethod">
    <el-row>
      <el-col :span="4">
        <div class="div_border_title">
          <h2>计费方式管理</h2>
        </div>
      </el-col>
    </el-row>
    <div class="toolbar-box">
      <el-button-group>
        <el-button v-for="(toolbar,index) in toolbarList" :key="index" :type="toolbar.type" :icon="toolbar.icon"
                   @click="getButtonType(toolbar.event)">{{toolbar.name}}
        </el-button>
      </el-button-group>
    </div>
    <el-table :data="billingList" border highlight-current-row fit @row-click="clickRow" @row-dblclick="openDialog">
      <el-table-column type="index" :label="$t('index')" width="100" align="center"></el-table-column>
      <el-table-column prop="billing_method_name" label="计费名称" align="center"></el-table-column>
      <el-table-column prop="billing_method_type" label="计费类型" :formatter="formatterBillingMethods"
                       align="center"></el-table-column>
      <el-table-column prop="memo" label="备注" align="center"></el-table-column>
    </el-table>
    <el-pagination @current-change="handleCurrentChange" style="margin-top:1em;" layout="total, prev, pager, next"
                   :total="total">
    </el-pagination>
    <el-dialog title="计费方式" v-model="isDialog" size="tiny">
      <el-form :model="billingForm" :rules="rules" ref="billingForm" label-width="115px">
        <el-form-item label="计费名称" prop="billing_method_name">
          <el-input v-model="billingForm.billing_method_name"></el-input>
        </el-form-item>
        <el-form-item label="计费类型" prop="billing_method_type">
          <el-input-number v-model="billingForm.billing_method_type" :controls="false"
                           style="width:100%"></el-input-number>
        </el-form-item>
        <el-form-item label="备注" prop="memo">
          <el-input type="textarea" v-model="billingForm.memo" :rows="4" resize="none"
                    placeholder="(1-120字)"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm('billingForm')">确 定</el-button>
        <el-button type="primary" @click="cancle()">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
  import { postDataToServer } from '../../assets/js/post.js'
  import { getStaticMapList } from '../../assets/js/GlobeDefine.js'
  import { getToolBarList } from '../../assets/js/buildStructure/list.js'

  export default {
    data () {
      return {
        currentID: '',
        currentData: {},
        currData: {},
        type: '',
        billingList: [],
        page_no: 1,
        total: 0,
        toolbarList: [],
        isDialog: false,
        accountForm: {},
        billing_method_type: '',//0次数，1时间
        billingForm: {
          billing_method_name: '',
          billing_method_type: '',
          memo: '',
        },
        addForm: {
          billing_method_name: '',
          billing_method_type: '',
          memo: '',
        },
        key: '',
        rules: {
          billing_method_name: [{
            required: true, min: 1, max: 50, message: '长度在 1 到 50 个字', trigger: 'blur'
          }],
          memo: [{
            min: 1, max: 120, message: '长度在 1 到 120 个字', trigger: 'blur'
          }],
          billing_method_type: [
            {type: 'number', required: true, message: '请输入计费类型', trigger: 'change'}],
        }
      }
    },
    created () {
      this.getToolBars()
      this.getBillingtList(1)
    },
    methods: {
      clickRow (row, column) {
        this.currentID = row.id
        this.currentData = row
      },
      handleCurrentChange (pageNum) {
        this.page_no = pageNum
      },
      //双击打开dialog
      openDialog (row, event) {
        this.isDialog = true
        this.billingForm = row
        this.currentID = row.id
        this.key = 'STALLS_BILLING_METHOD_EDIT'
      },
      getBillingtList (pageNum) {
        let _this = this
        let params = new Object()
        params.page_no = 1
        params.page_size = 20
        postDataToServer('STALLS_BILLING_METHOD_LIST', params).then((data) => {
          if (data.status === 0) {
            _this.billingList = data.data_list
            _this.total = data.total_results
          }
        })
      },
      AddOrEdit (type) {
        let _this = this
        if (type === 'add') {
          _this.isDialog = true
          _this.key = 'STALLS_BILLING_METHOD_ADD'
        } else if (type === 'edit') {
          if (_this.currentID === '') {
            this.$message('请选中其中一行')
          } else {
            _this.isDialog = true
            _this.billingForm = _this.currentData
            _this.key = 'STALLS_BILLING_METHOD_EDIT'
          }
        }
      },
      postToServer () {
        let _this = this
        let params = new Object()
        if (_this.key === 'STALLS_BILLING_METHOD_EDIT') {
          params.id = _this.currentID
        }
        params.billing_method_name = _this.billingForm.billing_method_name
        params.memo = _this.billingForm.memo
        params.billing_method_type = _this.billingForm.billing_method_type
        console.log(params)
        postDataToServer(_this.key, params).then((data) => {
          if (data.status === 0) {
            _this.$message({
              type: 'success',
              message: '成功!'
            })
            _this.currentID = ''
            for (let key in _this.billingForm) {
              _this.billingForm[key] = ''
            }
            _this.isDialog = false
            _this.getBillingtList(1)
          } else {
            _this.$message({
              type: 'warning',
              message: data.message
            })
          }
        })
      },
      submitForm (formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            this.postToServer()
          } else {
            this.$message('数据格式有误！')
            return false
          }
        })
      },
      delete () {
        let _this = this
        if (_this.currentID !== '') {
          _this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            let param = new Object()
            param.id = _this.currentID
            postDataToServer('STALLS_BILLING_METHOD_DEL', param).then((data) => {
              if (data.status === 0)
                _this.$message({
                  type: 'success',
                  message: '删除成功'
                })
              _this.getBillingtList(1)
            })
          }).catch(() => {
            _this.$message({
              type: 'info',
              message: '已取消删除'
            })
          })
        } else {
          _this.$message({
            message: '请选中一行',
            type: 'warning'
          })
        }
      },
      cancle () {
        this.isDialog = false
        for (let key in this.billingForm) {
          this.billingForm[key] = ''
        }
        _this.currentID = ''
        _this.getBillingtList(1)
      },
      //取得功能按钮
      getToolBars () {
        this.toolbarList = getToolBarList('list', 7)
      },
      formatterBillingMethods (row) {
        return getStaticMapList('billing_method_type', row.billing_method_type)
      },
      //根据不同的按钮执行不同的操作
      getButtonType (type) {
        let _this = this
        switch (type) {
          case 'add':
            _this.accountForm = _this.addForm
            _this.AddOrEdit('add')
            break
          case 'edit':
            _this.AddOrEdit('edit')
            break
          case 'delete':
            _this.delete()
          default:
            break
        }
      },
    },
    watch: {
      page_no (val, oldVal) {
        this.getBillingtList(val)
      }
    }
  }
</script>
<style scoped>
  #BillingMethod {
    padding: 2em;
  }

  .toolbar-box {
    border: 1px solid #20A0FF;
    background-color: #20A0FF;
    margin-top: 20px;
  }

  /*弹出框样式*/
  .dialog-content {
    /*border: 1px solid #E5E9F2;*/
  }

  .el-dialog {
    background-color: black;
  }

  .dialog-footer {
    text-align: center;
  }
</style>
